﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="EarringsRecommendationWeb.Home" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta http-equiv="Expires" CONTENT="0">
    <meta http-equiv="Cache-Control" CONTENT="no-cache">
    <meta http-equiv="Pragma" CONTENT="no-cache">
    <title>Home</title>
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="css/shop-homepage.css" rel="stylesheet">
    
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/fabric.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#form-nav-bar').load('navbar.html');
            $.getScript("js/Login.js", function () { });
        });
    </script>
    <script type="text/javascript" src="js/toast.js"></script>
    <script src="js/formatmoney.js"></script>
</head>
<body>
    
    <div class="alert alert-success" role="alert" style="display:none; z-index: 1000; position: absolute; left:0px; top: 50px;">
      <span>populate alert</span>
    </div>
    <!-- Navigation -->
    <nav id="form-nav-bar" class="navbar navbar-inverse navbar-fixed-top" role="navigation">        
        <!-- /.container -->
    </nav>
    <form runat="server">
    <!-- Page Content -->
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <p class="lead">
                    <img style="width:180px;" class="center-block" src="img/Logo.png" />                   
                </p>
                <div class="list-group">
                    <a id="myfunction" href="index.aspx" class="list-group-item hidden">เลือกต่างหูให้เหมาะกับตัวคุณ</a>
                     <p>รูปแบบต่างหู</p>
                    <a href="Home.aspx?style=Stud" class="list-group-item">Stud</a>
                    <a href="Home.aspx?style=Cluster" class="list-group-item">Cluster</a>
                    <a href="Home.aspx?style=Drop" class="list-group-item">Drop</a>
                    <a href="Home.aspx?style=Narrow Dangle" class="list-group-item">Narrow Dangle</a>
                    <a href="Home.aspx?style=Wide Dangle" class="list-group-item">Wide Dangle</a>
                    <a href="Home.aspx?style=Chandelier" class="list-group-item">Chandelier</a>
                    <a href="Home.aspx?style=Hoop" class="list-group-item">Hoop</a>
                    <a href="Home.aspx?style=Huggies" class="list-group-item">Huggies</a>
                </div>
            </div>
            <div class="col-md-9">
                <div id="div-carousel" class="row carousel-holder">

                    <div class="col-md-12">
                        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                            <ol class="carousel-indicators">
                                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                            </ol>
                            <div class="carousel-inner">
                                <div class="item active">
                                    <img class="slide-image" src="img/carousel/01.jpg" alt="">
                                </div>
                                <div class="item">
                                    <img class="slide-image" src="img/carousel/02.jpg" alt="">
                                </div>
                                <div class="item">
                                    <img class="slide-image" src="img/carousel/03.jpg" alt="">
                                </div>
                            </div>
                            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                            </a>
                            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right"></span>
                            </a>
                        </div>
                    </div>

                </div>

                <div id="show-earrings" class="row">

                    <div class="col-sm-4 col-lg-4 col-md-4">
                        <div class="thumbnail">
                            <img id="img01" style="height:150px; width:auto !important;" src="Data/Earrings/Stud/SD-0001-F.png" alt="">
                            <div class="caption">
                                <h4 id="price01" class="pull-right">$24.99</h4>
                                <h4><a id="name01" href="#">First Product</a>
                                </h4>
                                <a id="buynow01" class="buy-now pull-right glyphicon glyphicon-shopping-cart btn btn-primary" href="#" role="button"><span class="thai-font">  สั่งซื้อ</span></a>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-4 col-lg-4 col-md-4">
                        <div class="thumbnail">
                            <img id="img02" style="height:150px; width:auto !important;" src="Data/Earrings/Drop/DR-0001-F.png" alt="">
                            <div class="caption">
                                <h4 id="price02" class="pull-right">$64.99</h4>
                                <h4><a id="name02" href="#">Second Product</a>
                                </h4>
                                <a id="buynow02" class="buy-now pull-right glyphicon glyphicon-shopping-cart btn btn-primary" href="#" role="button"><span class="thai-font">  สั่งซื้อ</span></a>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-4 col-lg-4 col-md-4">
                        <div class="thumbnail">
                            <img id="img03" style="height:150px; width:auto !important;" src="Data/Earrings/Drop/DR-0002-F.png" alt="">
                            <div class="caption">
                                <h4 id="price03" class="pull-right">$74.99</h4>
                                <h4><a id="name03" href="#">Third Product</a>
                                </h4>
                                <a id="buynow03" class="buy-now pull-right glyphicon glyphicon-shopping-cart btn btn-primary" href="#" role="button"><span class="thai-font">  สั่งซื้อ</span></a>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-4 col-lg-4 col-md-4">
                        <div class="thumbnail">
                            <img id="img04" style="height:150px; width:auto !important;" src="http://placehold.it/320x150" alt="">
                            <div class="caption">
                                <h4 id="price04" class="pull-right">$84.99</h4>
                                <h4><a id="name04" href="#">Fourth Product</a>
                                </h4>
                                <a id="buynow04" class="buy-now pull-right glyphicon glyphicon-shopping-cart btn btn-primary" href="#" role="button"><span class="thai-font">  สั่งซื้อ</span></a>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-4 col-lg-4 col-md-4">
                        <div class="thumbnail">
                            <img id="img05" style="height:150px; width:auto !important;" src="http://placehold.it/320x150" alt="">
                            <div class="caption">
                                <h4 id="price05" class="pull-right">$94.99</h4>
                                <h4><a id="name05" href="#">Fifth Product</a>
                                </h4>
                                <a id="buynow05" class="buy-now pull-right glyphicon glyphicon-shopping-cart btn btn-primary" href="#" role="button"><span class="thai-font">  สั่งซื้อ</span></a>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-4 col-lg-4 col-md-4">
                      <div class="thumbnail">
                            <img id="img06" style="height:150px; width:auto !important;" src="http://placehold.it/320x150" alt="">
                            <div class="caption">
                                <h4 id="price06" class="pull-right">$94.99</h4>
                                <h4><a id="name06" href="#">Sixth Product</a>
                                </h4>
                                <a id="buynow06" class="buy-now pull-right glyphicon glyphicon-shopping-cart btn btn-primary" href="#" role="button"><span class="thai-font">  สั่งซื้อ</span></a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- /.container -->
    <div class="container">
        <hr>
        <!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>
                        Copyright &copy; Your Website 2015
                    </p>
                </div>
            </div>
        </footer>
    </div>
    <!-- /.container -->
    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/bootbox.js"></script>
    <script type="text/javascript">        
        function displayEarringsonHome() {
            $.ajax({
                type: "POST",
                dataType: "json",
                crossDomain: true,
                url: "http://localhost:49331/WSRestFul.asmx/GetRandomEarrings"
            }) //ajax
                .done(function (data) {

                    for (var i = 0; i < data.length; i++) {
                        document.getElementById('img0' + (i+1)).src = data[i].ERImage;
                        document.getElementById('name0' + (i + 1)).innerHTML = data[i].ERName.substring(0, 15);
                        document.getElementById('name0' + (i + 1)).title = data[i].ERName;
                        document.getElementById('name0' + (i + 1)).href = 'ProductDetail.aspx?earringcode=' + data[i].ERCode;
                        document.getElementById('price0' + (i + 1)).innerHTML = Number(data[i].ERPrice).formatMoney() + '  บาท';
                        $('#buynow0' + (i + 1)).attr('er_code', data[i].ERCode);
                    }

                }) //done
                .fail(function (data) {
                    bootbox.dialog({
                        title: 'Fatal Error',
                        message: '<div class="alert alert-danger" role="alert"><strong>Error in connection !!!</strong></div>'
                    });//boobox
                }) //fail
        }

        function init() {            
            displayEarringsonHome();
        }        

        var divCarousel = document.getElementById('div-carousel');
        var showEarring = document.getElementById('show-earrings');
        $(window).load(function () {
            init();
            if (typeof Earrings != 'undefined') {
                divCarousel.className = 'hidden';                

                var html = '';
                var array = Earrings[0];
                for (var i = 0; i < array.length; i++) {
                    html += '<div class="col-sm-4 col-lg-4 col-md-4">';
                    html += '<div class="thumbnail">';
                    html += '<img style="height:150px; width:auto !important;" src="' + array[i].ERImage + '" alt="">';
                    html += '<div class="caption">';
                    html += '<h4 class="pull-right">' + Number(array[i].ERPrice).formatMoney() + '  บาท' + '</h4>';
                    html += '<h4><a href="ProductDetail.aspx?earringcode=' + array[i].ERCode + '" title="' + array[i].ERName + '">' + array[i].ERName.substring(0, 15) + '</a>';
                    html += '</h4>';
                    html += '<a id="buy-' + array[i].ERCode + '" er_code="' + array[i].ERCode + '" class="buy-now pull-right glyphicon glyphicon-shopping-cart btn btn-primary" href="#" role="button"><span class="thai-font">  สั่งซื้อ</span></a>';
                    html += '</div>';
                    html += '</div>';
                    html += '</div>';
                }
                showEarring.innerHTML = html;
            }

            setTimeout(function () { displayItemQuantity(); }, 1000);
        });
        
        function buyNow(er_code, offsetTop) {
            
            //call ajax
            $.ajax({
                type: "POST",
                dataType: "json",
                crossDomain: true,
                url: "http://localhost:49331/WSRestFul.asmx/RecalQty",
                data: { ERCode: er_code, Qty: 1 }
            }) //ajax
            .done(function (data) {
                
                    Toast.init({
                        "selector": ".alert-success"
                    });
                    Toast.show("เพิ่มต่างหูในตะกร้าสินค้าของท่านเรียบร้อยแล้ว", offsetTop);

                    var tmp = parseInt($('span.badge').html());
                    tmp++;
                    $('span.badge').html(tmp);
                
            }) //done
            .fail(function (data) {
                bootbox.dialog({
                    title: 'Fatal Error',
                    message: '<div class="alert alert-danger" role="alert"><strong>Error in connection !!!</strong></div>'
                });//boobox
            }) //fail
        }

        $(document).on('click', '.buy-now', function (e) {
            e.preventDefault();
            var code = $(this).attr('er_code');
            buyNow(code, $(this).offset().top);
        })

        $(document).on('click', '.list-group-item', function (e) {
            //e.preventDefault();
            $(this).addClass('active');
        });
        $(document).on('blur', '.list-group-item', function (e) {
            //e.preventDefault();
            $(this).removeClass('active');
        });
        
    </script>
    </form>
</body>
</html>

